<template>
	<view>
		<view class="view-top" :style="'background: url('+bg+');padding-top:'+statusBarHeight+'rpx'">
			<view class="view-info">
				<image @click="info" src="../../static/jiaotong.png" mode=""></image>
				<text>派大唾沫星子</text>
			</view>
		</view>

		<view class="set-box">
			<view class="view-list-item" @click="inquiryList">
				<image class="img-left" src="../../static/dingdan.png" mode=""></image>
				<text class="text-list-item">询价订单</text>
				<image class="img-right" src="../../static/right.png" mode=""></image>
			</view>

			<view @click="address" class="view-list-item">
				<image class="img-left" src="../../static/dizhi.png" mode=""></image>
				<text class="text-list-item">我的地址</text>
				<image class="img-right" src="../../static/right.png" mode=""></image>
			</view>

			<view class="view-list-item" @click="show = true">
				<image class="img-left" src="../../static/kf.png" mode=""></image>
				<text class="text-list-item">客服电话</text>
				<image class="img-right" src="../../static/right.png" mode=""></image>
			</view>
			<u-popup :round="10" :show="show" @close="close" @open="open">
				<view class="popup-box">
					<view class="title"> <image src="../../static/phone.png" mode=""></image> 400-820-8220</view>
					<view class="blank"></view>
					<view class="title bacc" @click="show = false">取消</view>
				</view>
			</u-popup>

			<view @click="cart" class="view-list-item">
				<image class="img-left" src="../../static/gouwuche.png" mode=""></image>
				<text class="text-list-item">购物车</text>
				<image class="img-right" src="../../static/right.png" mode=""></image>
			</view>

			<view class="view-list-item" @click="set">
				<image class="img-left" src="../../static/shezhi.png" mode=""></image>
				<text class="text-list-item">设置</text>
				<image class="img-right" src="../../static/right.png" mode=""></image>
			</view>
		</view>
		<u-button @click="login()" text="点击登录" color="linear-gradient(to bottom, rgb(229, 0, 4), rgb(255, 101, 114))">
		</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bg: require('@/static/background.png'),
				show:false
			}
		},
		methods: {
			login() {
				uni.navigateTo({
					url: '../login/login'
				})
			},
			info() {
				uni.navigateTo({
					url: '../personal-data/personal-data'
				})
			},
			address() {
				uni.navigateTo({
					url: '../select-address/select-address'
				})
			},
			cart() {
				uni.navigateTo({
					url: '../cart/cart'
				})
			},
			set() {
				uni.navigateTo({
					url: '../set/set'
				})
			},
			open() {
				// console.log('open');
			},
			close() {
				this.show = false
				this.center = false
			},
			inquiryList() {
				uni.navigateTo({
					url: '../inquiry-list/inquiry-list'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f1f1f1;
	}

	.view-top {
		display: flex;
		flex-direction: column;
		height: 314rpx;
		background-size: cover !important;

		.view-info {
			margin-top: 148rpx;

			image {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				vertical-align: middle;
				margin: 0 42rpx;
			}

			text {
				font-size: 30rpx;
				font-weight: bold;
			}
		}
	}

	.set-box {
		border-radius: 20rpx;
		background-color: #FFF;
		margin-top: 40rpx;
		width: 95%;
		margin: auto;

		.view-list-item {
			display: flex;
			align-items: center;
			background-color: #FFF;
			height: 100rpx;
			padding: 0 30rpx;
			border-radius: 20rpx;

			.text-list-item {
				flex-grow: 1;
				flex-shrink: 1;
				font-size: 30rpx;
				color: #222;
				margin-left: 20rpx;
			}

			.img-left {
				width: 40rpx;
				height: 40rpx;
			}

			.img-right {
				margin-left: 18rpx;
				width: 12rpx;
				height: 20rpx;
			}
		}
		
		.popup-box {
			height: 240rpx;
		
			.title {
				height: 110rpx;
				text-align: center;
				line-height: 110rpx;
				
				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 30rpx;
					position: relative;
					top: 15rpx;
				}
			}
			
			.bacc {
				background-color: #FFFBFB;
			}
		
			.blank {
				height: 20rpx;
				background-color: #f8f8f8;
			}
		}
	}
</style>
